<template>
  <div style="padding: 20px 5% 0 5%" class="search_content">
    <!--{{ this.$route.query.searchval }}-->
    <div style="padding: 0 15% 20px 15%">
      <a-input-search
        v-model:value="activeKey.searchtxt"
        style="width: 100%"
        @search="onSearch"
      />
    </div>

    <!-- <a-radio-group
      v-model:value="activeKey.line1"
      button-style="solid"
      @change="getsearchList"
    >
      <a-radio-button
        v-for="tab in tabkey1"
        :key="tab.title"
        :value="tab.key"
        >{{ tab.title }}</a-radio-button
      >
    </a-radio-group> -->

    <!-- <a-divider /> -->

    <a-radio-group
      v-if="activeKey.line1 == '1'"
      v-model:value="activeKey.line2"
      button-style="solid"
      @change="getsearchList"
    >
      <a-radio-button
        v-for="tab in tabkey2"
        :key="tab.title"
        :value="tab.key"
        >{{ tab.title }}</a-radio-button
      >
    </a-radio-group>

    <a-divider v-if="activeKey.line1 == '1'" />

    <div v-if="activeKey.line1 == '1'" style="margin-left: 10px">
      发布日期：<a-range-picker
        v-model:value="daterange"
        valueFormat="YYYY-M-D"
        @change="getsearchList"
      />
    </div>

    <a-list
      :loading="loading"
      item-layout="vertical"
      :data-source="itemList.value"
      style="padding: 1% 5% 0 5%"
    >
      

      <template #renderItem="{ item }">
        <a-list-item
          key="item.a_order"
          style="min-height: 100px; max-height: 300px"
        >
          <template #actions>
            <span :key="LikeOutlined">
              <component v-bind:is="LikeOutlined" style="margin-right: 8px" />
              {{ item.like_count }}
            </span>
            <span :key="MessageOutlined">
              <component
                v-bind:is="MessageOutlined"
                style="margin-right: 8px"
              />
              {{ item.com_count }}
            </span>
            <span :key="StarOutlined">
              <component v-bind:is="StarOutlined" style="margin-right: 8px" />
              {{ item.sub_count }}
            </span>
            <span :key="'Author'" >
              <a-avatar style="margin-right: 8px"
                v-if="item.u_avatar"
                :src="'/api/avatar/' + item.u_avatar"
              />
              <a-avatar v-else style="margin-right: 8px">
                <template #icon>
                  <UserOutlined />
                </template>
              </a-avatar>
              {{item.u_name}}
            </span>
          </template>

          <a-list-item-meta>
            <template #title>
              <a :href="'/user/articledetail?a_id=' + item.a_id">{{
                item.a_title
              }}</a>
            </template>
          </a-list-item-meta>

          <div>{{ item.a_html }}</div>
          <div>
            <a-image height="60px" v-for="url in item.imglist" :key="url" :src="url"/>
          </div>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script>
import { defineComponent, ref, reactive } from "vue";
import { get, post, tip } from "@/common";
import {
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";

const daterange = ref([]);
const activeKey = ref({
  searchtxt: "",
  line1: "1",
  line2: "1",
  startdate: "",
  enddate: "",
});
const tabkey1 = ref([
  { key: "1", title: "文章" },
  { key: "2", title: "用户" },
]);
const tabkey2 = ref([
  { key: "1", title: "综合排序" },
  { key: "2", title: "点赞排序" },
  { key: "3", title: "收藏排序" },
]);

const getsearchtxt = () => {
  if (window.location.search.split("searchval=")[1]) {
    activeKey.value.searchtxt = decodeURIComponent(window.location.search.split("searchval=")[1]);
    getsearchList();
    console.log(activeKey.value.searchtxt);
  } else {
    console.log("n");
  }
};
const onSearch = () => {
  window.location.href =
    window.location.search.split("=")[0] + "=" + activeKey.value.searchtxt;
};

const itemList = reactive({});
const getsearchList = () => {
  activeKey.value.startdate = daterange.value[0];
  activeKey.value.enddate = daterange.value[1];
  if (activeKey.value.line1 == 1) {
    post("/user/feed/searchart", activeKey.value).then((res) => {
      itemList.value = res.data;
    });
  } else if (activeKey.value.line1 == 2) {
    post("/user/feed/searchuser", activeKey.value).then((res) => {
      itemList.value = res.data;
    });
  }
};
export default defineComponent({
  setup() {
    getsearchtxt();
    return {
      StarOutlined,
      LikeOutlined,
      MessageOutlined,
      daterange,
      onSearch,
      getsearchtxt,
      getsearchList,
      itemList,
      activeKey,
      tabkey1,
      tabkey2,
    };
  },
});
</script>

<style>
.search_content {
  margin-top:30px;
  margin-bottom:50px;
  box-shadow: rgb(182, 182, 182) 2px 2px 2px 2px;
  background: #ffffff;
}
.ant-radio-button-wrapper,
.ant-radio-button-wrapper:last-child,
.ant-radio-button-wrapper:first-child {
  line-height: 25px;
  height: 25px;
  border-radius: 10px 10px 10px 10px;
  position: static;
  border-left: 1px solid #d9d9d9;
}
.ant-radio-button-wrapper,
.ant-radio-button-wrapper:last-child {
  margin-left: 10px;
}
.ant-radio-button-wrapper:not(:first-child)::before {
  position: fixed;
}
.ant-divider-horizontal {
  margin: 12px 0;
}

</style>

